<template>
    <div class="user_confirm_page">
         <div class="address_wrap" @click="goToAddresList()" v-if="!addressSel || !addressSel.id">
            <div>
                <img src="~assets/images/icon_location.png" class="map_img">
    
            </div>
            <div class="open_img_wrap">
                快去添加收获地址
                <img src="~assets/images/icon_fanhui.png" class="open_img">
            </div>
        </div> 
        <div class="address_wrap" @click="goToAddresList()">
            <div>
                <img src="~assets/images/icon_positioning.png" class="map_img map_img_mini">
            </div>
            <div class="open_img_wrap">
                <p class="top_name">
                    <span  v-text="addressSel.consumer_name"></span>
                    <span  v-text="addressSel.mobile_phone"></span>
                </p>
                <p>
                    <span  v-text="addressSel.city"></span>
                    <span  v-text="addressSel.detail_address"></span>
                </p>
            </div>
            <div>
                <img src="~assets/images/icon_fanhui.png" class="open_img">
            </div>
        </div>
        <div class="index_page gift_list_wrap">
            <div class="second_confirm_wrap">
                <div class="common_wrap">
                    <div class="ul_wrap gift_wrap">
                        <ul>
                            <li>
                                <div class="left_img">
                                    <div class="img_wrap">
                                        <img :src="resource_data.resource_image">
                                    </div>
    
                                </div>
                                <div class="main_content">
                                    <div class="main_item top_item">
                                        <div class="left_title" v-text="resource_data.resource_name">
                                        </div>
                                    </div>
                                    <div class="main_item bottom_item">
                                        <div class="left_des" v-if="resource_data.SKU_list">
                                            <span v-for="item in resource_data.SKU_list" v-text="item.content"></span>
                                        </div>
                                        <div class="left_des" v-if="!resource_data.SKU_list">
                                            规格：默认
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li style="padding: 0;border-bottom: 0">
                                <div class="main_content">
                                    <div class="main_item top_item">
                                        <div>
                                            <span class="red_span">￥
                                                <i v-text="resource_data.price/100.00" class="price_i"></i>
                                            </span>
                                        </div>
                                        <div class="ali">
                                            商品数量：
                                            <span class="red_span">X
                                                <span class="price_i">1</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="confirm_btn" v-if="resource_data.gift_number==0" @click="goToAddress(0)">领取</div>
        <div class="confirm_btn" v-if="resource_data.gift_number!=0" @click="goToAddress(1)">领取</div>
    </div>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active 在 <2.1.8 中 */

{
    opacity: 0
}
</style>
<script>
import { mapState } from 'vuex'
import api from '@/api/api'
import { MessageBox } from 'mint-ui'
export default {
    name: 'userConfirm',
    data() {
        return {
            resource_data: {},
            user_address: {
                id: ''
            },
            user_validate: 0
        }
    },
    components: {

    },
    methods: {
        getOrderInfo: function () {
            let order_params = {
                functioncode: 'give_gifts_info',
                gift_id: this.$route.params.gift_id
            }
            var _self = this;
            api.get(order_params).then((res) => {
                if (res.data.returncode == '000000') {
                    this.getUserValidate();
                    _self.resource_data = res.data.record;
                    _self.resource_data.resource_image = _self.imgCheck(_self.resource_data.resource_image);
                }
            });
        },
        getUserValidate: function () {
            let order_params = {
                functioncode: 'check_user_receive_gift',
                gift_id: this.$route.params.gift_id,
                team_id: this.team_id,
                user_id: this.user_id
            }
            api.get(order_params).then((res) => {
                if (res.data.returncode == '000000') {
                    if(res.data.record.count<this.resource_data.limit_number){
                        this.user_validate=1;
                    }else{
                        this.user_validate=0;
                    }
                }
            });
        },
        imgCheck: function (value) {
            if (value.length > 50) {
                return value;
            } else {
                return this.img_url + value;
            }
        },
        goToAddress: function (val) {
            if(this.user_validate==0){
                MessageBox({
                    message: '您已经领过该礼物啦，去商场中心逛逛吧。',
                    confirmButtonText: '去看看',
                    showCancelButton: true
                }).then(
                    action => {
                        if (action == confirm) {
                            let market_url = this.current_host + '/mp/home';
                            window.location.replace(market_url);
                        }
                    }
                );
                return;
            }
            if (val == 0) {
                this.$router.push({
                    name: 'gift_received',
                    query: { is_ok: 'sorry' },
                    params: { gift_id: this.$route.params.gift_id }
                });
            }
            if (val == 1) {
                this.postGiftReceived();
            }
        },
        goToAddresList: function () {
            this.$router.push({
                name: 'list_address',
                params: { gift_id: this.$route.params.gift_id }
            });
        },
        postGiftReceived: function () {
            let _self = this;
            let add_params = {
                functioncode: 'receive_gift',
                gift_id: this.$route.params.gift_id,
                consumer_name: this.addressSel.consumer_name,
                consumer_mobile_phone: this.addressSel.mobile_phone,
                consumer_city: this.addressSel.city,
                consumer_street: '',
                consumer_detail_address: this.addressSel.detail_address,
                user_id: this.user_id
            };
            if (!this.addressSel.id) {
                MessageBox({
                    message: '您还没有填写收货地址哦',
                    confirmButtonText: '去填写',
                    showCancelButton: true
                }).then(
                    action => {
                        if (action == confirm) {
                            this.$router.push({
                                name: 'gift_received',
                                query: { is_ok: 'sorry' }
                            });
                        }
                    }
                    );
                return;
            }
            api.post(add_params).then(function (res) {
                if (res.data.returncode === '000000' && res.data.record) {
                    _self.$router.push({
                        name: 'gift_received',
                        query: { is_ok: 'ok' }
                    });
                } else {
                    _self.$router.push({
                        name: 'gift_received',
                        query: { is_ok: 'sorry' }
                    });
                }
            });

        }
    },
    computed: {
        
        addressSel (){
            return this.$store.state.addressSel;
        },
    },
    mounted: function () {
        this.$nextTick(function () {
            this.getOrderInfo();
        });
    },
}
</script>

<style scoped>

</style>
